import React, { Component } from "react";

import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  TouchableHighlight,
  Image,
  Dimensions
} from "react-native";

export default class ClSlider extends Component {

  constructor(props) {
    super(props);
    
    this.state = {

      width: Dimensions.get("window").width,
      height: Dimensions.get("window").height,
      position: 0,
      duration: 15000
    }
  }

  // 
  _onRef(ref) {

    this._ref = ref;
  }

  _move() {

    const { position, width } = this.state;
    const x = width * position;
    this._ref.scrollTo({ x, y: 0, animated: true });
  }

  _onScrollBeginDrag() {

    clearTimeout(this._timer);
  }

  _onScrollEndDrag() {

    this._timer = setInterval(() => {

      const { images } = this.props;

      let count = images.length;
      let { position } = this.state;
      ++position;
      if(position == count) {
        position = 0;
      }

      this.setState({ position });
    }, this.state.duration);
  }

  _onMomentumScrollEnd(el) {

    const x = el.nativeEvent.contentOffset.x;
    const position = x / this.state.width;

    this.setState({ position });
  }

  componentDidMount() {

    this._onScrollEndDrag();
  }

  componentWillUnmount() {
    
    clearTimeout(this._timer);
  }

  componentDidUpdate(prevProps, prevState) {
    
    if(prevState.position != this.state.position) {

      this._move();
    }
  }

  render() {

    let { height, images, onPress } = this.props;
    const { width, position } = this.state;
    height = height || this.state.height * 3 / 9;

    return (

      <View>
        <ScrollView
          horizontal = { true }
          showsHorizontalScrollIndicator = { false }
          pagingEnabled = { true }
          centerContent = { true }
          style = { [styles.container, { height }] }
          ref = { ref => this._onRef(ref) }
          onScrollBeginDrag = { this._onScrollBeginDrag.bind(this) }
          onScrollEndDrag = { this._onScrollEndDrag.bind(this) }
          onMomentumScrollEnd = { this._onMomentumScrollEnd.bind(this) }
        >

        {
          images.map( (image, index) => {

            return (
              <TouchableOpacity
                key = { `cl-slider-touch-${index}` }
                onPress = { () => onPress(index) }
              >
                <Image
                  key = { `cl-slider-${index}` }
                  source = {{ uri: image.image }}
                  style = {{ height, width }}
                />
                <View style = { styles.titles }>
                  <Text
                    style = { [styles.title, { width }] }
                    numberOfLines = { 5 }>
                    {image.title}
                  </Text>
                </View>
              </TouchableOpacity>
            );
          })
        }
        </ScrollView>
        <View
          style = { styles.buttons }
        >
        {
          images.map( (image, index) => {

            return (

              <TouchableHighlight
                key = { `cl-slider-botton-${index}` }
                underlayColor = "#ccc"
                style = { [ styles.button, position == index && styles.buttonSelected] }
              >
                <View></View>
              </TouchableHighlight>
            );
          })
        }
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  container: {
    flexDirection: "row"
  },
  buttons: {
    height: 15,
    marginTop: -15,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row"
  },
  button: {
    margin: 2,
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: "#ccc",
    opacity: 0.9
  },
  buttonSelected: {
    opacity: 1,
    backgroundColor: "#fff"
  },
  titles: {
    height: 70,
    marginTop: -85,
    opacity: 1
  },
  title: {
    color: "#fff",
    fontSize: 20,
    flex: 1,
    padding: 10
  }
})